<template>
	<view class="jiaokuan-box">
		<view class="jiaokuan">
			<view class="title">
				缴款申请
			</view>
			<view class="row">
				<view class="left">
					客户姓名
				</view>
				<input type="text" value="" v-model="custname" placeholder="先生" />

			</view>
			<view class="row">
				<view class="left">
					银行卡号
				</view>
				<input type="text" value="" v-model="profit_card_no" placeholder="请输入银行卡号" />
			</view>
			<view class="row">
				<view class="left">
					开户行
				</view>
				<view class="choose-bank">
					<input type="text" value="" v-model="profit_bank_nm" placeholder="请选择银行" @click="showList()" />
					<ul v-show="show">
						<li ref="liCon" v-show="show" @click="chooseBank(item)" v-for="item in items">{{ item.bank_nm }}</li>
					</ul>
					
				</view>
			</view>
			<view class="row">
				<view class="left">
					开户支行
				</view>
				<input type="text" value="" v-model="profit_card_bin" placeholder="请填写支行" />

			</view>
			<view class="row">
				<view class="left">
					缴费金额
				</view>
				<input type="text" value="" v-model="balance" placeholder="请填写金额" />
				<view class="">
					万元
				</view>

			</view>
			<view class="row">
				<view class="left">
					缴款日期
				</view>
				<view class="uni-list-cell-db chooseInp">
					<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
						<view class="uni-input">{{date}}</view>
					</picker>
				</view>
			</view>

			<view class="">
				<view class="left" style="padding: 40upx 0 0;">
					缴款凭证
				</view>
				<view class="photo-box">
					<block v-for="(item,key) in imageList" :key="key">
						
						<view class="photo-item" :class="{'showPhoto':item.havePhoto}" @click="toIdCardz(key)" :key="key">{{item.content}}</view>
						<!-- <view class="uni-uploader__file"> -->
							<!-- <image class="uni-uploader__img" src="" :src="image" :data-src="image" @tap="previewImage">123</image> -->
						<view class="deil-photo" :class="{'showPhoto':!item.havePhoto}">
							<image class="photo-item showImg" :class="{'showPhoto':!item.havePhoto}" :src="item.imgUrl" :data-src="item.imgUrl" @tap="previewImage(key)"></image>
							<!-- <span class="iconfont deleteImg" @click="deleteImg()">&#xe77d;</span> -->
							<text class="delImg" @click="delImg(key)"></text>
						</view>
						
					</block>
				</view>
			</view>

			<view class="questionBox" @click="addJiaoKuan">
				<view class="question">
					<label class="iconfont">&#xe66a;</label>提交
				</view>
			</view>
		</view>
		<view class="listBg" v-show="show" @click="showList()"></view>
	</view>
</template>

<script>
	import global_wyx from '../../../../../../components/tool/licaishiwyx'
	import global_ from '../../../../../../components/tool/Global'
	import timePicker from '../../../../../../components/picker/picker.vue'
	import addImage from '../../../../../API/image/image.vue';
	import nchar from '../../../../../../common/nchar.js';
	// import cnchar from '';
	// @import "https://www.theajack.com/cnchar/cnchar.min.js";
	var isOnload = false;
	
	
	export default {
		components: {
			addImage,
			nchar
		},
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				image:"",
				profit_card_no:'',//银行卡号
				profit_bank_no:'',//银行编号
				profit_bank_nm:'',//银行名称
				profit_card_bin:'',//支行
				balance:'',//预约金额
				projId:'',
				custname:'',
				proName:'',
				yuyueId:'',
				custid:'',
				date:currentDate,
				token:uni.getStorageSync('token_key'),
				imageList:[{
					content:"上传身份证正面",
					havePhoto:false,
					imgUrl:'',
					name:'身份证正面（APP）',
					isChoose:false//区分是选择的图片还是带入的图片，选择就传后台，带入不传
				},{
					content:"上传身份证反面",
					havePhoto:false,
					imgUrl:'',
					name:'身份证反面（APP）',
					isChoose:false
				},{
					content:"上传银行卡正面",
					havePhoto:false,
					imgUrl:'',
					name:'银行卡正面（APP）',
					isChoose:false
				},{
					content:"上传银行卡反面",
					havePhoto:false,
					imgUrl:'',
					name:'银行卡反面（APP）',
					isChoose:false
				},{
					content:"上传银行卡交易凭条",
					havePhoto:false,
					imgUrl:'',
					name:'银行卡交易凭条（APP）',
					isChoose:false
				}],//证件照
				imageUrl:'',//证件照
				items: [],
				itemsTemp:[],
				itemsTempPinYin:[],//拼音首字母
				show: false,
				value: ''
			};
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		onLoad(option) {
			isOnload = true;//如果为true，则不执行通过账号查询的操作
			console.info("调用onLoad")
			var projId = option.projId;
			var balance  = option.balance;
			var custid   = option.custid;
			var proName  = option.proName;
			var custname = option.custname;
			var yuyueId = option.yuyueId;
			this.balance = balance;
			this.custname = option.custname;
			this.proName = proName;
			this.custname = custname;
			this.yuyueId = yuyueId;
			this.projId = projId;
			this.custid = custid
			uni.request({
				url: global_wyx.api.getLastJy,
				method: 'POST',
				data: {
					custid:custid
				},
				success: res => {
					console.info(res.data.dataType)
					var result = res.data.data;
					console.info("银行卡号："+result.c_bankacco);
					console.info("银行编号："+result.c_bankcode);
					console.info("银行名称："+result.c_bankname);
					console.info("支行："+result.c_subbranchname);
					this.profit_card_no=result.c_bankacco;
					this.profit_bank_no=result.c_bankcode;
					this.profit_bank_nm=result.c_bankname;
					this.profit_card_bin=result.c_subbranchname;
					// console.info("历史交易提供客户前端选择，等前端："+result.cardmnpBoList);
					
				},
				header : {'content-type':'application/x-www-form-urlencoded'},
				fail: () => {},
				complete: () => {}
			});
			//得到缴款附件
			uni.request({
				url: global_wyx.api.getJiaoKuanAcceAdd,
				method: 'POST',
				data: {
					custid:custid
				},
				success: res => {
					console.log(res);
					console.info(res.data.dataType)
					var result = new Array();
					result = res.data.data;
					var imageList = this.imageList;
					for(var i =0;i<result.length;i++){
						var getfilename = result[i].filename;
						var fileurl = result[i].fileurl;
						for (var j =0;j<imageList.length;j++){
							if(getfilename.split(".")[0] == imageList[j].name){
								console.info(imageList[j].name)
								imageList[j].imgUrl=fileurl;
								imageList[j].havePhoto=true;
							}
						}
					}
				},
				header : {'content-type':'application/x-www-form-urlencoded'},
				fail: () => {},
				complete: () => {}
			});
			//得到所有的银行
			uni.request({
				url: global_wyx.api.getAllBank,
				method: 'POST',
				data: {},
				header : {'content-type':'application/x-www-form-urlencoded'},
				success: res => {
					var list = res.data.data.cardmnpBoList;
					console.info(list);
					for (var i =0;i<list.length;i++){
						// list[i].pingyin=list[i].bank_nm.spellFirst("low");
						list[i].pingyin="";
					}
					this.items=list;
					this.itemsTemp = list;
					
				},
				fail: () => {},
				complete: () => {}
			});
		},
		methods:{
			delImg(key) {
				this.imageList[key].imgUrl= '';
				this.imageList[key].havePhoto= false
			},
			chooseBank(item) {
				this.profit_bank_nm = item.bank_nm;
				this.profit_bank_no = item.bank_no;
				// console.log('==============='+item.bank_nm);
				this.show = !this.show
			},
			showList() {
				this.show = !this.show
			},
			bindPickerChange: function(e) {
				//console.log('picker发送选择改变，携带值为', e.target.value)
				this.index = e.target.value
				this.oper_Id = this.array[this.index];
			},
			bindDateChange: function(e) {
				this.date = e.target.value;
				console.log("修改客户了日期------"+this.date);
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
			
				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			addJiaoKuan(e){
					var that=this
					uni.request({
						url:global_wyx.api.addJiaoKuan,
						method: 'POST',
						header: {
							'content-type': 'application/x-www-form-urlencoded'
						},
						data: {
							yuyueId:this.yuyueId,
							card_nm:this.custname,
							balanceDate:'2019-01-19 00:00:00',
							bank_no:this.profit_bank_no,
							card_no:this.profit_card_no,
							balance:this.balance,
							bank_nm:this.profit_card_bin
						},
						dataType: 'json',
						success: res => {
							this.resultData = res.data;
							var imageList = that.imageList;
							console.info(JSON.stringify(this.resultData))
							var fileNo = this.resultData.data;//附件序号
							var message = this.resultData.message;//返回结果
							
							if(this.resultData.code==0){
								var addFlag = true;
								console.info("添加成功，准备添加图...")
								for(var i=0;i<imageList.length;i++){
									if(imageList[i].imgUrl!=""&&imageList[i].isChoose==true){
										console.info("正在上传第"+(i+1)+"张图片")
										console.log("code=============================="+imageList[i].name)
										var nameStr = imageList[i].name.toString();
										uni.uploadFile({
											url:global_wyx.api.uploadPlImg,
											filePath:that.imageList[i].imgUrl,
											name: 'file',
											header: {
												'content-type': 'multipart/form-data'
											},
											formData:{
												yewuType:'jiaokuan',
												// fileNamePre:imageList[i].name,
												fileNo:fileNo,
												nameStr:nameStr
											},
											success: (upres) => {
												// fileNo//附件序号
												var upresult = upres.data;
												console.info("1231231231");
												console.info(upresult)
												upresult=JSON.parse(upresult);
// 												console.info(upresult)
												var code = upresult.code;
												if(code==0){
													var filename = upresult.data.cFilename;
													var fileNamePre = upresult.data.cFilenamePre;
													var cFilenameEnd = upresult.data.cFilenameEnd;
													var filesize = upresult.data.lFilesize;
													var fileUrl = upresult.data.url;
													var datePath = upresult.data.datePath;
													var crmurl = upresult.data.crmurl;
													var nameStr1 = upresult.data.nameStr;
													console.info("nameStr1========================="+nameStr1)
													uni.request({
														url:global_wyx.api.addJiaoKuanAcce,
														method: 'POST',
														header: {
															'content-type': 'application/x-www-form-urlencoded'
														},
														data: {
															cFilename:nameStr1+cFilenameEnd,
															lFilesize:filesize,
															token:this.token,
															cSubkeyid:fileNo,
															cCatalog:'TCAPITALCURRENTS',
															lStorageid:fileNamePre,
															fileUrl:fileUrl,
															datePath:datePath,
															crmurl:crmurl
														},
														success: res => {},
														fail: () => {
															addFlag = false;
														},
														complete: () => {}
													});
												}else{
													addFlag = false;
												}
											},
											fail: (err) =>{
												console.info('上传失败==================')
												addFlag = false; 
												console.info(global_wyx.api.addJiaoKuanAcce)
											}
										})
									}
								}
								var tip = "上传成功";
								if(addFlag == false){tip=tip+",上传图片失败"}
								uni.showToast({
									title: tip,
									icon: 'success',
										success: res => {
											sleep2(500).then(() => {
												uni.navigateBack({  
													delta: 1 
												});  
											})
										},
									fail: () => {},
									complete: () => {}
								});
								
							}else{
								uni.showModal({
									content:message,
									showCancel:false
								});
							}
							
							/* uni.navigateBack({
								
							}); */
						},
						fail: (err) => {
							console.info("评论失败")
							console.log(err)
						},
						complete: () => {}
					});
				
			},
			toIdCardz(key){
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera','album'], //从相册选择
					success:(res)=>{  
						console.log(JSON.stringify(res.tempFilePaths)); 
						console.info("key"+key)
						this.imageList[key].imgUrl=res.tempFilePaths[0];
						this.imageList[key].havePhoto = true;
						this.imageList[key].isChoose=true;
// 						this.imageList = res.tempFilePaths;  
// 						this.imageUrl = res.tempFilePaths[0];
						// item.imgUrl= res.tempFilePaths[0];
					}  
					
				});
				
			},
			abcde(){
				console.info(this.imageUrl)
				console.info(JSON.stringify(this.imageList))
			},
			previewImage(key){
				// var current = this.imageList[key].imgUrl
				console.info("this.imageList[key]"+this.imageList[key])
				console.info(this.imageList[key].imgUrl)
				var showT = new Array();
				showT.push(this.imageList[key].imgUrl);
				uni.previewImage({
					// current: current,
					urls: showT
				})
			}
// 			previewImage: function(e) {
// 					var current = JSON.stringify(this.imageList[0])
// 					var showT = new Array();
// 					console.info(JSON.stringify(this.imageList[0]))
// 					showT.push(JSON.stringify(this.imageList[0]));
// 					uni.previewImage({
// 						current: current,
// 						urls: this.showT
// 					})
// 				}
		},
		watch:{
			profit_card_no:function(val, oldVal){
// 				console.info("新值为："+val);
// 				console.info("old:"+oldVal)
				if(val!=null&&(val.length==6||(val.length>=16&&val.length<=19))){
					var url ='';
					var sixCode='';//输入的银行卡如果到六位数，则记录该数，不是则置空
					if(isOnload==true){isOnload = false; console.info("isOnload："+isOnload)}
					else{
						console.info("调用接口"+global_wyx.api.getBankByCode)
						if(val.length==6){
							sixCode = val;
						}else{ 
							sixCode = '';
						}
						// console.info("six:"+sixCode)
						uni.request({
							url: global_wyx.api.getBankByCode,
							method: 'POST',
							data: {
								codeno:this.profit_card_no,
								sixCode:sixCode
							},
							header : {'content-type':'application/x-www-form-urlencoded'},
							success: res => {
								// console.info(JSON.stringify(res))
								var rsult = res.data;
								var rsultData = rsult.data;
								// console.info("rsult.code"+rsult.code)
								if(rsult.code==0){
									// console.info("有值")
									var	c_bankcode = rsultData.c_bankacco;//银行编号
									var	c_bankname = rsultData.c_bankname;//银行名称
									var	c_subbranchname = rsultData.c_subbranchname;//银行名称
									console.info(JSON.stringify(rsultData))
									console.info("银行编号："+rsultData.c_bankcode);
									console.info("银行名称："+rsultData.c_bankname);
									console.info("支行："+rsultData.c_subbranchname);
									this.profit_bank_no=c_bankcode;
									this.profit_bank_nm=c_bankname;
									this.profit_card_bin=c_subbranchname;
								}
							},
							fail: () => {},
							complete: () => {}
						});
					}
				}
			},
			profit_bank_nm:function(val, oldVal){
				//要展示的新数组
				var itemsNew = new Array();
				var itemsTemp = this.itemsTemp;
				for(var i=0;i<itemsTemp.length;i++){
					var bank_nmT = itemsTemp[i].bank_nm;
					var bank_noT = itemsTemp[i].bank_no;
					var pingyinT = itemsTemp[i].pingyin;
					if(bank_nmT.indexOf(val) != -1 ||pingyinT.indexOf(val) != -1){
						itemsNew.push(itemsTemp[i]);
					}
				}
				
				this.items = itemsNew;
				if(val=""){
					this.items=itemsTemp;
				}
				if(val!=oldVal){
					this.profit_card_bin=""
				}
			}
		}
	}
	function sleep2(ms) {
		return new Promise(function(resolve, reject) {
			setTimeout(resolve, ms)
		})
	}
</script>

<style>
	page {
		background: rgb(255, 255, 255);
	}
		
	.deil-photo {
		position: relative;
	}
	
	.delImg {
		width: 10px;
		height: 10px;
		border: 1px solid #8F8F94;
		border-radius: 50%;
		background: url(../../../../../../static/image/indexImg/xx.png);
		background-size: 100% 100%;
		position: absolute;
		top: 15px;
		right: 0;
	}
	
	.jiaokuan-box {
		background: #f5f5f5;
		padding-top: 20upx;

	}
	.choose-bank {
		flex: 3;
		/* display: none; */
		position: relative;
		z-index: 110;
	}
	ul {
		width: 100%;
		height: 200px;
		background: #ffffff;
		list-style: none;
		border: 1px solid #ccc;
		/* text-align: left; */
		padding: 0;
		position: absolute;
		left: 0;
		top: 40px;
		z-index: 100;
		overflow-y: scroll;
	}
	li {
		height: 50upx;
		/* border-bottom: 1px solid #ccc; */
	}
	.listBg {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		background: rgba(0,0,0,0);
		z-index: 99;
	}

	.jiaokuan {
		background: rgb(255, 255, 255);
		padding: 0 30upx;
	}

	.title {
		text-align: center;
		line-height: 100upx;
		font-size: 17px;
	}

	.row {
		height: 98upx;
		border-bottom: 1px solid rgba(0, 0, 0, 0.1);
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.left {
		font-size: 15px;
		padding-right: 20px;
		flex: 1;
	}
	
	
	.row input {
		flex: 3;
	}

	.questionBox {
		display: flex;
		flex-direction: row;
		justify-content: center;
		width: 100%;
		padding: 40upx 0;
		text-align: center;
	}

	.question {
		width: 240upx;
		height: 70upx;
		background: linear-gradient(-90deg, rgba(196, 156, 90, 1) 0%, rgba(226, 196, 138, 1) 100%);
		border-radius: 35px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		color: rgb(255, 255, 255);
	}

	label {
		margin-right: 10upx;
	}

	.shuoming {
		width: 650upx;
		padding: 20upx 18upx;
		color: rgba(153, 153, 153, 1);
		font-size: 14px;
		height: 100upx;
		border: 1px solid rgba(238, 238, 238, 1);
		border-radius: 5px;
		margin-top: 20upx;
	}

	.right {
		min-width: 520upx;
	}

	.photo-box {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;


	}

	.photo-item {
		width: 340upx;
		height: 200upx;
		border: 0.5px solid rgba(207, 207, 207, 1);
		border-radius: 5px;
		margin-top: 30upx;
		background: url("http://ai.ylcaifu.com/appimg/images/2.0-%E4%BA%A7%E5%93%81/2.9-%E7%BC%B4%E6%AC%BE/android/drawable-xhdpi/shangchuangpingzheng.png") no-repeat center;
		background-size: 100% 100%;
		display: flex;
		text-align: center;
		justify-content: center;
		font-size: 12px;
		font-weight: 500;
		color: rgba(153, 153, 153, 1);
		line-height: 280upx;
	}

	.jiaokuan {
		background: rgb(255, 255, 255);
		padding: 0 30upx;
	}

	.title {
		text-align: center;
		line-height: 100upx;
		font-size: 17px;
	}

	.row {
		height: 98upx;
		border-bottom: 1px solid rgba(0, 0, 0, 0.1);
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.left {
		font-size: 15px;
		padding-right: 20px;
		flex: 1;
	}
	
	
	.row input {
		flex: 3;
	}

	.questionBox {
		display: flex;
		flex-direction: row;
		justify-content: center;
		width: 100%;
		padding: 40upx 0;
		text-align: center;


	}

	.question {
		width: 240upx;
		height: 70upx;
		background: linear-gradient(-90deg, rgba(196, 156, 90, 1) 0%, rgba(226, 196, 138, 1) 100%);
		border-radius: 35px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		color: rgb(255, 255, 255);

	}

	label {
		margin-right: 10upx;
	}

	.shuoming {
		width: 650upx;
		padding: 20upx 18upx;
		color: rgba(153, 153, 153, 1);
		font-size: 14px;
		height: 100upx;
		border: 1px solid rgba(238, 238, 238, 1);
		border-radius: 5px;
		margin-top: 20upx;
	}

	.right {
		min-width: 520upx;
	}

	.photo-box {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;


	}

	.photo-item {
		width: 340upx;
		height: 200upx;
		border: 0.5px solid rgba(207, 207, 207, 1);
		border-radius: 5px;
		margin-top: 30upx;
		background: url("http://ai.ylcaifu.com/appimg/images/2.0-%E4%BA%A7%E5%93%81/2.9-%E7%BC%B4%E6%AC%BE/android/drawable-xhdpi/shangchuangpingzheng.png") no-repeat center;
		background-size: 100% 100%;
		display: flex;
		text-align: center;
		justify-content: center;
		font-size: 12px;
		font-weight: 500;
		color: rgba(153, 153, 153, 1);
		line-height: 280upx;
	}

	.jiaokuan {
		background: rgb(255, 255, 255);
		padding: 0 30upx;
	}

	.title {
		text-align: center;
		line-height: 100upx;
		font-size: 17px;
	}

	.row {
		height: 98upx;
		border-bottom: 1px solid rgba(0, 0, 0, 0.1);
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.left {
		font-size: 15px;
		padding-right: 20px;
		flex: 1;
	}

	.row input {
		flex: 3;
	}

	.questionBox {
		display: flex;
		flex-direction: row;
		justify-content: center;
		width: 100%;
		padding: 40upx 0;
		text-align: center;


	}

	.question {
		width: 240upx;
		height: 70upx;
		background: linear-gradient(-90deg, rgba(196, 156, 90, 1) 0%, rgba(226, 196, 138, 1) 100%);
		border-radius: 35px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		color: rgb(255, 255, 255);

	}

	label {
		margin-right: 10upx;
	}

	.shuoming {
		width: 650upx;
		padding: 20upx 18upx;
		color: rgba(153, 153, 153, 1);
		font-size: 14px;
		height: 100upx;
		border: 1px solid rgba(238, 238, 238, 1);
		border-radius: 5px;
		margin-top: 20upx;
	}

	.right {
		min-width: 520upx;
	}

	.photo-box {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;


	}

	.photo-item {
		width: 340upx;
		height: 200upx;
		border: 0.5px solid rgba(207, 207, 207, 1);
		border-radius: 5px;
		margin-top: 30upx;
		background: url("http://ai.ylcaifu.com/appimg/images/2.0-%E4%BA%A7%E5%93%81/2.9-%E7%BC%B4%E6%AC%BE/android/drawable-xhdpi/shangchuangpingzheng.png") no-repeat center;
		background-size: 100% 100%;
		display: flex;
		text-align: center;
		justify-content: center;
		font-size: 12px;
		font-weight: 500;
		color: rgba(153, 153, 153, 1);
		line-height: 280upx;
	}
	.showPhoto {
		display:none;
	}
	.photo-item.showPhoto {
		/* display:block; */
		width: 340upx;
		height: 200upx;
		border: 0.5px solid rgba(207, 207, 207, 1);
		border-radius: 5px;
		margin-top: 30upx;
		background: url("http://ai.ylcaifu.com/appimg/images/2.0-%E4%BA%A7%E5%93%81/2.9-%E7%BC%B4%E6%AC%BE/android/drawable-xhdpi/shangchuangpingzheng.png") no-repeat center;
		background-size: 100% 100%;
		display: /* flex */;
		text-align: center;
		justify-content: center;
		font-size: 12px;
		font-weight: 500;
		color: rgba(153, 153, 153, 1);
		line-height: 280upx;
	}
	.chooseInp {
		flex: 3;
	}
</style>
